<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet"> 
    <link href="../css/index.css" rel="stylesheet">    
    <title>课程评价</title>
  </head>
  <body>
    <div class="evalbox">
      <div class="evaluate">
        <ul>
          <li class="h_box">
            <span><img :src="pic" alt=""></span>
            <span class="name">{{name}}</span>
          </li>
          <li>
            <h4>开课时间</h4>
            <p>{{startDate}}</p>
            <h4>开课地点</h4>
            <p>{{address}}</p>
          </li>
        </ul>
      </div>

      <div class="evaluate">
        <dl>
          <dt>您对这次课程的综合评分为（满分10分）</dt>
          <dd>
            <div class="grade">
              <div class="box">
                <div class="innerbox">
                <span>1</span><span>2</span><span>3</span><span>4</span><span class="cur">5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
                </div>

              </div>
              
            </div>          
          </dd>
          <dd>
            <h5>您有什么更好的建议</h5>
            <textarea name="" v-model="content" id="" cols="30" rows="10"></textarea>
          </dd>
        </dl>
        <div class="button" @click="submit">提 交</div>
      </div>

    </div>

    <script src="../js/zepto-1.1.4.min.js"></script>
    <script>

      // 字体控制
      function setFontsize() {
          document.querySelector('html').style.fontSize = (window.screen.width / 375 * 10 + 'px');
      }
      setFontsize();
      window.onresize = function() {
          setFontsize();
      }


      // $(window).scroll(function(event) {
      //   console.info($('.box').scrollLeft());
      // });





      var num = 5;
      document.querySelectorAll('.box')[0].addEventListener('scroll',function(){

        var toleft = document.querySelectorAll('.box')[0].scrollLeft;        
        if(toleft < 10){
          num = 0;
        }else{
          num = parseInt(toleft/10)>=10?9:parseInt(toleft/10);
        }
        console.info(num);
        $('.innerbox span').siblings().removeClass('cur');
        $('.innerbox span').eq(num).addClass('cur');


        //document.querySelectorAll('.innerbox')[0].children[num].setAttribute('class','abc');
        
      });

    </script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-resource1.3.4.js"></script>
    <script>
        var vm = new Vue({
            el: '.evalbox',
            data:{
                name:'1',
                pic:'',
                startDate:'',
                address:'',
                content:'',
                id:'',
                msg:''
            },
            created:function(){
                var $this = this;
                this.$http.post('/fotile-api-0.0.2/curriculumn/detail','{"id":"662"}').then(function(data){
                    var data = data.data;
                    if(data.status == 200){
                        $this.name = data.data.curriculumName;
                        $this.pic = data.data.picture.path;
                        $this.startDate = data.data.startDate;
                        $this.address = data.data.store.detailAddress;
                        $this.id = data.data.id;
                    }
                    
                },function(){
                    console.info('error');
                });

            },
            methods:{
              //评论提交
              submit:function(){
                var $this = this;
                this.$http.post('/fotile-api-0.0.2/evaluate/create',{"evaluate":num,"refId":$this.id,"remark":$this.content,"type":2,"userId":41}).then(function(data){
                    var data = data.data;
                    if(data.status == 200){
                      alert(data.data);
                      
                    }
                    
                },function(){
                    alert('网络有误请稍后再试');
                });
              }
            }
        });

    </script>

  </body>
</html>